<template>
  <div class="banner">
    <div class="title">
      首页banner（图片宽高最适为：912px，312px）
    </div>
    <div class="explain" v-if="writeTitle">
      <div class="skip_font">
        <el-input placeholder="请输入链接地址例：http://www.baidu.com" v-model="site" class="sites"></el-input>
        <el-button  type="primary" @click="submit()">提交</el-button>
      </div>
    </div>
    <div class="home">
      <div class="row">
        <el-upload
          action="http://www.hsjrfw.com/hs-management/prod-api/banner/image/upload"
          :class="{disabled: uploadDisabled}"
          :headers="config"
          list-type="picture-card"
          :show-file-list="true" 
          :file-list="imgList"
          :before-upload="beforeAvatarUpload"
          :on-success="handleAvatarSuccess">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt=""
              >
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <!-- <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span> -->
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
        </el-upload>      
      </div>
      <div class="addr">
        <div class="sub_addr" v-for="item in list1" :key="item.id">
          {{item.bannerJumpUrl}}
        </div>
      </div>
      
    </div>    
    
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import { MessageBox } from "element-ui";
import { getToken } from '@/utils/auth'
import {
  bannerAdd,bannerList,bannerDel
} from "@/api/system/user";
export default {
  components: {},
  data() {
    return {
      // imageUrl: '',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      site: '',
      writeTitle: false,
      fileName: '',
      list: [],
      imgList: [],
      list1: [],
    };
  },
  computed: {
    config() {
      return {'Authorization': getToken()}
    },
    uploadDisabled:function() {
      return this.writeTitle
    }
  },
  created() {},
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.imgList = []
      this.list1 = []
      bannerList().then(res => {
        if (res.code == '200') {
          this.list = res.rows
          this.list.forEach((element) => {
            let temp = {
              url: 'http://www.hsjrfw.com/hs-management/resource/' + element.bannerFileName,
              id: element.id
            }
            if (element.bannerType == '1') {
              this.imgList.push(temp)
              this.list1.push(element)
            }
          });
          console.log(this.imgList)
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    handleRemove(file) {
      bannerDel(file.id).then(res => {
        if (res.code == '200') {
          this.writeTitle = false
          this.$message({ message: res.msg, type: "success" });
          this.getList()
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    handleAvatarSuccess(res, file) { 
      this.imageUrl = URL.createObjectURL(file.raw); 
      if (res.code == 200) {
        this.writeTitle = true
        this.fileName = res.data.imageName
      } else {
        this.$message.error(res.msg); 
      }
    }, 
    beforeAvatarUpload(file) { 
      const isJPG = file.type === 'image/jpeg'; 
      const isPNG = file.type === 'image/png'; 
      const isLt2M = file.size / 1024 / 1024 < 2; 
      if (!isJPG && !isPNG) { 
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!'); 
      } 
      if (!isLt2M) { 
        this.$message.error('上传头像图片大小不能超过 2MB!'); 
      } 
      return (isJPG || isPNG) && isLt2M; 
    },
    submit() {
      let params = {
        bannerFileName: this.fileName,
        bannerType: '1',
        bannerJumpUrl: this.site
      }
      bannerAdd(params).then(res => {
        this.listLoading = false
        if (res.code == '200') {
          this.writeTitle = false
          this.$message({ message: res.msg, type: "success" });
          this.getList()
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    }
  }
};
</script>
<style scoped>
  .banner {
    margin-left: 26px;
  }
  /deep/ .el-upload-list__item{
    width:456px;
    height: 156px;
  }
  .el-upload-list--picture-card .el-upload-list__item
  
  .avatar-uploader .el-upload { 
    border: 1px dashed #d9d9d9; 
    border-radius: 6px; 
    cursor: pointer; 
    position: relative; 
    overflow: hidden; 
  } 
  .avatar-uploader .el-upload:hover { 
    border-color: #409EFF; 
  } 
  .avatar-uploader-icon { 
    font-size: 28px; 
    color: #8c939d; 
    width: 178px; 
    height: 178px; 
    line-height: 178px; 
    text-align: center; 
  } 
  .avatar { 
    width: 178px; 
    height: 178px; 
    display: block; 
  }
  .row {
    display: flex;
    position: absolute;
  }
  .explain {
    margin-bottom: 20px;
    /* left: 20px; */
  }
  .title {
    padding: 20px 0; 
  }
  .sites {
    width: 300px;
    margin-right: 10px;
  }
  .skip_font {
    padding-bottom: 10px;
  }
  /deep/ .disabled .el-upload--picture-card {
    display: none;
  }
  .sub_title {
    position: relative;
    top: 140px;
  }
  .addr {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    top: 166px;
    z-index: -1;
  }
  .sub_addr {
    width: 473px;
    height: 196px;
  }
  /deep/ .el-upload-list--picture-card .el-upload-list__item {
    margin: 0 16px 36px 0
  }
  .home {
    position: relative;
  }
</style>
